<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="ie"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
		
		<title>Carousel Plugin</title>
		<meta name="description" content="There are many like it, but this one is mine." />
		
		<style type="text/css" media="screen">
			body { padding-bottom: 5em; }
			ul { margin: 0; padding: 0; list-style: none; }
			
			.carousel-tabs { clear: both; }
			.carousel-active-tab { color: red; }	
			.carousel-disabled,
			.mr-rotato-disabled { color: #aaa; }

			.slidewrap2 .carousel-tabs {
				padding: 0;
				margin: 1em 0;
				clear: both;
			}
			.slidewrap2 .carousel-tabs li {
			    display: inline-block; 
			    padding: 0 2px;
			}
			.slidewrap2 .carousel-tabs a {
			    background: #ddd;
			    display: inline-block;
			    height: 10px;
			    text-indent: -9999px;
			    width: 10px;
			    border-radius: 5px;
			}
			.ie .slidewrap2 .carousel-tabs li,
			.ie .slidewrap2 .carousel-tabs a { 
				display: block;
				float: left;
			}
			.slidewrap2 .carousel-tabs .carousel-active-tab a {
				background: #777;
			}
			
			.slidewrap4 {
				overflow: hidden !important;
				position: relative; 
				width: 100%; 
			}
			.slidewrap4 .image-slide {
				position: relative;
				width: 100%;
				height: 300px;
				overflow: hidden;
			}
			.slidewrap4 img {
				display: block;
				width: 600px;
				position: absolute; 
				left: 50%;
				margin-left: -300px;
				z-index: 1;
			}
			.slidewrap4 img.lazy {
				display: none;
			}
			
			.events {
				font: normal 11px/1.4 arial, helvetica, sans-serif;
			}
			
		</style>
		<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	</head>
	<body>
	
	<div class="slidewrap">
		<ul class="slidecontrols">
			<li><a href="#sliderName" class="next">Next</a></li>
			<li><a href="#sliderName" class="prev">Prev</a></li>
		</ul>
		<ul class="slider" id="sliderName">
			<li class="slide">	
				<h2 class="slidehed">First Slide</h2>
				<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero.</p>
			</li>
			<li class="slide">	
				<h2 class="slidehed"><a href="#">Second Slide</a></h2>
				<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</p>
			</li>
			<li class="slide">	
				<h2 class="slidehed">Third Slide</h2>
				<p>Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget.</p>
			</li>
			<li class="slide">	
				<h2 class="slidehed"><a href="#">Fourth Slide</a></h2>
				<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio.</p>
			</li>
			<li class="slide">	
				<h2 class="slidehed">Fif' Slide</h2>
				<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</p>
			</li>
		</ul>
	</div>
	
	<div class="slidewrap2">
		<ul class="slider">
			<li class="slide">	
				<h2>First Slide</h2>
				<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero.</p>
			</li>
			<li class="slide">	
				<h2>Second Slide</h2>
				<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</p>
			</li>
			<li class="slide">	
				<h2>Third Slide</h2>
				<p>Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget.</p>
			</li>
			<li class="slide">	
				<h2>Fourth Slide</h2>
				<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio.</p>
			</li>
			<li class="slide">	
				<h2>Fif' Slide</h2>
				<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</p>
			</li>
		</ul>
	</div>
	
	<div class="slidewrap3">
		<ul class="slider">
			<li class="slide">	
				<h2>First Slide</h2>
				<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero.</p>
			</li>
			<li class="slide">	
				<h2>Second Slide</h2>
				<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</p>
			</li>
			<li class="slide">	
				<h2>Third Slide</h2>
				<p>Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget.</p>
			</li>
			<li class="slide">	
				<h2>Fourth Slide</h2>
				<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio.</p>
			</li>
			<li class="slide">	
				<h2>Fif' Slide</h2>
				<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</p>
			</li>
		</ul>
	</div>
	
	<div class="slidewrap4">
		<ul class="slider">
			<li class="slide">
				<div class="image-slide">
					<a href="http://placehold.it/600x300&text=Slide+One">
						<img title="" alt="Image 1" src="http://placehold.it/600x300&text=Slide+One" />
						<object><noscript><div><img alt="Image 1" src="http://placehold.it/600x300&text=Slide+One" /></div></noscript></object>
					</a>
				</div>
			</li>
			<li class="slide">
				<div class="image-slide">
					<a href="http://placehold.it/600x300/F0E000/000000&text=Slide+Two">
						<img class="lazy" title="Image: http://placehold.it/600x300/F0E000/000000&text=Slide+Two" alt="Image 2" src="http://placehold.it/1x1" />
						<object><noscript><div><img alt="Image 2" src="http://placehold.it/600x300/F0E000/000000&text=Slide+Two" /></div></noscript></object>
					</a>
				</div>
			</li>
			<li class="slide">
				<div class="image-slide">
					<a href="http://placehold.it/600x300/FF9D00/FFFFFF&text=Slide+Three">
						<img class="lazy" title="Image: http://placehold.it/600x300/FF9D00/FFFFFF&text=Slide+Three" alt="Image 3" src="http://placehold.it/1x1" />
						<object><noscript><div><img alt="Image 3" src="http://placehold.it/600x300/FF9D00/FFFFFF&text=Slide+Three" /></div></noscript></object>
					</a>
				</div>
			</li>
			<li class="slide">
				<div class="image-slide">
					<a href="http://placehold.it/600x300/B3ED21/9ED11D&text=Slide+Four">
						<img class="lazy" title="Image: http://placehold.it/600x300/B3ED21/92C21B&text=Slide+Four" alt="Image 4" src="http://placehold.it/1x1" />
						<object><noscript><div><img alt="Image 4" src="http://placehold.it/600x300/B3ED21/92C21B&text=Slide+Four" /></div></noscript></object>
					</a>
				</div>
			</li>
		</ul>
	</div>
	
	<script type="text/javascript" src="plugin.js"></script>
	<script>
		$(document).ready(function() {
			$('.slidewrap').carousel({
				slider: '.slider',
				slide: '.slide',
				slideHed: '.slidehed',
				nextSlide : '.next',
				prevSlide : '.prev',
				addPagination: true,
				addNav : false,
				rotate : false,
				startSlide: 1,
				lazy: false,
				lazyFadeDuration: 100, // ms.
				autoRotate: 5000
			});
			
			$('.slidewrap2').carousel({
				slider: '.slider',
				slide: '.slide',
				addNav: false,
				addPagination: true,
				speed: 300 // ms.
			});
			
			$('.slidewrap3').carousel({ 
				namespace: "mr-rotato" // Defaults to “carousel”.
			})
			.bind({
				'mr-rotato-beforemove' : function() {
					$('.events').append("<li>“beforemove” event fired.</li>");
				},
				'mr-rotato-aftermove' : function() {
					$('.events').append("<li>“aftermove” event fired.</li>");
				}
			})
			.after('<ul class="events">Events</ul>');
			
			$('.slidewrap4').carousel({
				slider: '.slider',
				slide: '.slide',
				slideHed: '.slidehed',
				nextSlide : '.next',
				prevSlide : '.prev',
				addPagination: true,
				addNav : true,
				rotate : true,
				startSlide: 1,
				lazy: true,
				lazyFadeDuration: 300, // ms.
				autoRotate: 2500
			});
		});
	</script>
	</body>
</html>